import SwiftUI

// Animation Practice

struct AnimationPractice: View {
    @State var isShow = false
    
    var body: some View {
        VStack(spacing: 30) {
            Text("Animation Practice")
                .font(.largeTitle)
            
            Text("End Result")
                .font(.title)
                .foregroundColor(.gray)
            
            Text("Our final animation example.")
                .font(.title2)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.indigo)
            
            makeDemoView()
            
            Spacer()
            
            Button(action: {
                isShow.toggle()
            }, label: {
                Text("Change")
                    .font(.title)
                    .padding(.bottom, 50)
            })
        }
        
    }
    
    func makeDemoView() -> some View {
        VStack(spacing: 2) {
            HStack(alignment: .bottom, spacing: 2) {
                Rectangle()
                    .frame(width: 70, height: 35)
                    .offset(x: isShow ? 0 : -300)
                    .foregroundColor(isShow ? Color.red : Color.orange)
                
                Rectangle()
                    .frame(width: 35, height: 70)
                    .offset(y: isShow ? 0 : -300)
                    .foregroundColor(isShow ? Color.blue : Color.orange)
            }
            .offset(x: -17.0)
            
            HStack(alignment: .top, spacing: 2) {
                Rectangle()
                    .frame(width: 35, height: 70)
                    .offset(y: isShow ? 0 : 300)
                    .foregroundColor(isShow ? Color.yellow : Color.orange)
                
                Rectangle()
                    .frame(width: 70, height: 35)
                    .offset(x: isShow ? 0 : 300)
                    .foregroundColor(isShow ? Color.green : Color.orange)
            }
            .offset(x: 17.0)
        }
        .opacity(isShow ? 1 : 0)
        
        .rotationEffect(Angle(degrees: isShow ? 0 : -90)) // 负角度是往哪个方向旋转：逆时针
        .padding()
        .padding(.top, 200)
        .animation(.easeInOut(duration: 5), value: isShow)
        
    }
}





